<html>
<head>
	<meta charset="UTF-8"/>
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
	<title>吃货餐厅</title>
	<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5/themes/metro/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5/themes/mobile.css"/>
	<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5/themes/icon.css"/>
	<script type="text/javascript" src="js/jquery-easyui-1.5/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery-easyui-1.5/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="js/jquery-easyui-1.5/jquery.easyui.mobile.js"></script>
    <style type="text/css">
	.RED
	{
		background: #eee;
	}
	
	.bg
	{
	 	background: #E6E6E6;
	}
</style>

    <script type="text/javascript">
	 /*<![CDATA[*/ 
	$(document).ready(  
			  function(){
				  $('#dlg1').dialog('close');
				  $("#car").hide();
				  $("input[type='checkbox']").click(function(e){
					  stopBubble(e);
					  
					  var count = $("input[type='checkbox']:checked").length;
					  if(count>0)
					  {
						  $("#carnum").html(count);
						  $("#car").show();
					  }else
					  {
						  $("#car").hide();
					  }
					  
				  });
				  
				 
	 });
	 
	 function stop(e)
	 {
		 stopBubble(e);
	 }
	 
	function stopBubble(e) { 
		//如果提供了事件对象，则这是一个非IE浏览器 
		if ( e && e.stopPropagation ) 
		    //因此它支持W3C的stopPropagation()方法 
		    e.stopPropagation(); 
		else
		    //否则，我们需要使用IE的方式来取消事件冒泡 
		    window.event.cancelBubble = true; 
	}
	 
	

	function show(obj) 
	{
		$(obj).removeClass('bg');
	} 
	
	function removeClass(obj) 
	{
		$(obj).removeClass('RED');
	} 

	 function clk(obj)
	 {
		  $(obj).toggleClass('bg');
		  setTimeout(function(){show(obj);}, 100);
		         
		  var foodid =	$(obj).attr("name"); 
		  var url = "show_foodImg?id="+foodid;
		  window.location.href=url;
	 }
	 
	 function showred(obj) 
		{
			$(obj).removeClass('RED');
		} 
	 
	 function action(obj)
	 {
		         $(obj).toggleClass('RED');
		         setTimeout(function(){showred(obj);}, 100);
	 }
	
	 function showChat(obj)
	 {
		 
		 $(obj).toggleClass('RED');
         setTimeout(function(){removeClass(obj);}, 100);
         
         var deskid=$("#deskid").val();
         
         var url ="p_showChat?&deskid="+deskid;
 		 window.location.href=url;
	 }
	 
	 function actionFirst(obj)
	 {
		         $(obj).toggleClass('RED');
		         setTimeout(function(){removeClass(obj);}, 100);
		         
		         history.go(-1);
	 }
	 
	 function addcar()
	 {
		 var flag=0;
		 var deskid=$("#deskid").val();
		 $("input[type='checkbox']").each(function(){ 
			  if($(this).is(':checked')) {
				  var count="#"+$(this).attr("id")+"_input";
				  var num = $(count).val();
				  var url = "add_order?foodid="+$(this).attr("id")+"&deskid="+deskid+"&count="+num;
				  
				  $.ajax(
				 			{
				 	        	url: url,
				 	        	async: false,//改为同步方式
				 	        	type: "GET",
				 	        	success: function (data) {
				 	        		if(data=='failed')
									  {
									  		$('#dlg1').dialog('open').dialog('center');
									  		flag=1;
									  }
				 	 			}
				 	 	});
				  
				 
				  
			  }
		  });
		 
		 if(flag==1)
				return;
		 
		 $("input[type='checkbox']").each(function(){ 
			  if($(this).is(':checked')) { 
				  $(this).removeAttr("checked");   
			  }
		  });
		
		 $("#car").hide();
		var deskid=$("#deskid").val();
         
         var url ="p_showCar?&deskid="+deskid;
 		 window.location.href=url;
	 }
	 
	 function showchar(obj)
	 {
		 
		 $(obj).toggleClass('RED');
         setTimeout(function(){showred(obj);}, 100);
         
         var deskid=$("#deskid").val();
         
         var url ="p_showCar?&deskid="+deskid;
 		 window.location.href=url;
	 }
	 
	/*]]>*/  
	</script>


</head>
<body>
	<div class="easyui-navpanel">
	
        <header>
            <div class="m-toolbar">
                <div class="m-title"><span th:text="${typename}"/></div>
                <div class="m-left">
                    <a href="javascript:void(0)" class="easyui-linkbutton m-back" plain="true" outline="true" onclick="history.go(-1)">返回</a>
                </div>
                <div class="m-right" id="car">
                    <a href="javascript:void(0)" class="easyui-linkbutton" plain="true" outline="true" onclick="addcar()"><span style="color: red" id="carnum"/>加入购物车</a>
                </div>
               
            </div>
        </header>
        

           <div th:each="food,iterStat:${list}">
          	 		<table border="1"  width="100%" style="border-style: solid;border-width: 0 0 1px 0;border-color: #ddd;" th:name="${food.id}" onclick="clk(this)">
          	 			<tr>
          	 				<td style="border: none;" width="50%" height="100px" ><img width="100%" height="100%" th:src="'/myres/'+${food.image}"/></td>
          	 				<td style="border: none;" width="50%"  >
          	 					<table width="100%"  th:with="isEven=(${flag} eq '0')">
          	 						
          	 						<tr><td style="border: none;"><span style="font-size: 23px;font-family:'微软雅黑';" th:text="${food.foodname}"/></td><td align="right"><input th:attr="type=${isEven}?'checkbox':'hidden'" th:id="${food.id}" /></td></tr>
          	 						<tr><td style="border: none;"><span style="font-size: 20px;color: #009900;font-family:'微软雅黑';" th:text="${food.price}+' 元'"/></td></tr>
          	 						<tr><td style="border: none;" name="tdclick" onclick="stop(this)">
          	 						  <div  onclick="stop()"><input th:id="${food.id}+'_input'" class="easyui-numberspinner" value="1" data-options="min:1" style="width:81px;"/></div>
          	 						</td></tr>
          	 					</table>
          	 				</td>
          	 			</tr>
          	 		</table>
           </div>
     
        
          <footer height="40px">
           <table width="100%" height="40px" id="tb">
           	<tr>
           		<td onclick="actionFirst(this)" style="border-right:1px solid #F00;border-color: #ebebeb;" align="center">首页</td>
           		<td onclick="showchar(this)" style="border-right:1px solid #F00;border-color: #ebebeb;" align="center">购物车</td>
           		<td onclick="showChat(this)" align="center">客服</td>
           	</tr>
           </table>
        </footer>
        <input  id="deskid" type="hidden" th:value="${deskid}" />
	</div>
	
	<div id="dlg1" class="easyui-dialog" style="padding:20px 6px;width:80%;" data-options="inline:true,modal:true,closed:true,title:'提示'">
			<center><div>您已下单如需帮助请联系客服!</div></center>
			<div class="dialog-button">
				<a href="javascript:void(0)" class="easyui-linkbutton" style="width:100%;height:35px" onclick="$('#dlg1').dialog('close')">确定</a>
			</div>
	</div>
</body>
</html>